<!--<template>-->
<!--  <div class="avue-contail" :class="{ 'avue&#45;&#45;collapse': isCollapse }">-->
<!--    <div class="avue-header">-->
<!--      &lt;!&ndash; 顶部导航栏 &ndash;&gt;-->

<!--      <top ref="top" />-->
<!--    </div>-->
<!--    <div class="avue-layout">-->
<!--&lt;!&ndash;      <div v-if="!$route.meta.nomenu" :class="classL">&ndash;&gt;-->
<!--&lt;!&ndash;        &lt;!&ndash; 左侧导航栏 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        <sidebar />&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div v-if="$route.meta.nomenu" :class="classL">&ndash;&gt;-->
<!--&lt;!&ndash;        &lt;!&ndash; 左侧导航栏 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        <logo></logo>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--      <div :class="classM">-->
<!--        &lt;!&ndash; 顶部标签卡 &ndash;&gt;-->
<!--        <tags v-if="!$route.meta.nomenu" />-->
<!--        &lt;!&ndash;        <transition name="fade-scale">&ndash;&gt;-->
<!--        &lt;!&ndash;          <search class="avue-view" v-show="isSearch"></search>&ndash;&gt;-->
<!--        &lt;!&ndash;        </transition>&ndash;&gt;-->
<!--        &lt;!&ndash; 主体视图层 &ndash;&gt;-->
<!--        &lt;!&ndash; 主体视图层 &ndash;&gt;-->
<!--        <div-->
<!--          style="height: 100%; overflow-y: auto; overflow-x: hidden"-->
<!--          id="avue-view"-->
<!--          v-show="!isSearch"-->
<!--        >-->
<!--          <keep-alive>-->
<!--            <router-view class="avue-view" v-if="$route.meta.$keepAlive" />-->
<!--          </keep-alive>-->
<!--          <router-view class="avue-view" v-if="!$route.meta.$keepAlive" />-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--    <div class="avue-shade" @click="showCollapse"></div>-->
<!--  </div>-->
<!--</template>-->
<template>
  <el-container style="height: 100%; overflow: hidden;" :class="{ 'avue&#45;&#45;collapse': isCollapse }">
    <el-header class="m-header">
      <top ref="top"/>
      <tags></tags>
    </el-header>
    <el-container style="overflow: auto;">
      <el-aside width="200px" v-if="this.userInfo.role_name==='strator'||this.userInfo.role_name==='deanDepartment'||this.userInfo.role_name==='DepartmentVisor'"  >
            <div class="avue-layout" style="height: calc(100vh - 95px); overflow-x: hidden;">
              <div v-if="!$route.meta.nomenu" :class="classL">
                <!-- 左侧导航栏 -->
                <sidebar />
              </div>
              <div v-if="$route.meta.nomenu" :class="classL">
                <!-- 左侧导航栏 -->
                <logo></logo>
              </div>
            </div>
      </el-aside>
      <el-main style="padding: 25px !important;">
        <div class="app-main">
          <keep-alive>
            <router-view class="avue-view" v-if="$route.meta.$keepAlive"/>
          </keep-alive>
          <router-view class="avue-view" v-if="!$route.meta.$keepAlive"/>
          <div class="avue-shade" @click="showCollapse"></div>
        </div>
        <!--      <div >-->
        <!--        <transition name="fade-scale" >-->
        <!--          <search class="avue-view" v-show="isSearch"></search>-->
        <!--        </transition>-->
        <!--        <tags v-if="!$route.meta.nomenu"/>-->
        <!--      </div>-->


      </el-main>
    </el-container>
    <!--    <el-footer>Footer</el-footer>-->
  </el-container>
</template>

<script>
import {mapGetters} from "vuex";
//import tags from "./tags";
//import search from "./search";
import top from "./top";
import tags from './top/TagsView/Tags'

import sidebar from "./sidebar/";
import admin from "@/util/admin";
import {validatenull} from "@/util/validate";
import {calcDate} from "@/util/date.js";
import {getStore} from "@/util/store.js";
//import {resetRouter} from "@/router/router.js";
import logo from "./logo";

export default {
  components: {
    top,
    tags,
    sidebar,
    logo
  },
  name: "index",
  provide() {
    return {
      index: this,
    };
  },
  data() {
    return {
      // classL: 'avue-left',
      // classM: '', //avue-main
      //搜索控制
      isSearch: false,
      //刷新token锁
      refreshLock: false,
      //刷新token的时间
      refreshTime: "",
    };
  },
  created() {
    //实时检测刷新token
    this.refreshToken();
  },
  mounted() {
    this.init();
  },
  computed: {
    ...mapGetters(["isMenu", "isLock", "isCollapse", "website", "menu","userInfo"]),
    // 计算属性的 getter
    classL: function () {
      return this.$route.meta.nomenu === true ? "" : "avue-left";
    },
    classM: function () {
      return this.$route.meta.nomenu === true ? "" : "avue-main";
    },
  },
  props: [],
  methods: {
    showCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    // 初始化
    init() {
      this.$store.commit("SET_SCREEN", admin.getScreen());
      window.onresize = () => {
        setTimeout(() => {
          this.$store.commit("SET_SCREEN", admin.getScreen());
        }, 0);
      };
      this.$store.dispatch("FlowRoutes").then(() => {
      });
    },
    //打开菜单
    openMenu(item = {}) {
      let data = getStore({
        name: "menuAll",
        debug: true,
      });
      console.log(data, item)
      //  获取全部菜单
      // this.$store.dispatch("GetMenuAll").then((data) => {
      // if (data.length !== 0) {
      //   resetRouter();
      //   this.$router.$avueRouter.formatRoutes(data, true);
      // }
      // });
    },
    // 定时检测token
    refreshToken() {
      this.refreshTime = setInterval(() => {
        const token =
          getStore({
            name: "token",
            debug: true,
          }) || {};
        const date = calcDate(token.datetime, new Date().getTime());
        if (validatenull(date)) return;
        if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
          this.refreshLock = true;
          this.$store
            .dispatch("refreshToken")
            .then(() => {
              this.refreshLock = false;
            })
            .catch(() => {
              this.refreshLock = false;
            });
        }
      }, 10000);
    },
  },
};
</script>
<style lang="less" scoped>
.m-header {
  padding: 0px 0px;
  min-width: 1680px;
  height: 95px !important;
}
// .app-main{height:100%;}
</style>
